<template>
    <div>
        <div><h1>首页</h1></div>
        <div>
            <h1>最近1个月注册人数： {{ regCount }} 人</h1>
            <h1>男性： {{ maleCount }} 人</h1>
            <h1>女性： {{ femaleCount }} 人</h1>
        </div>
        <div>
            <el-row>
    <el-col :span="6">
        <div id="main1" style="width: 400px; height: 300px"></div>
    </el-col>
    <el-col :span="6">
        <div id="main2" style="width: 400px; height: 300px"></div>
    </el-col>
    <el-col :span="12">
        <div id="main3" style="width: 700px; height: 300px"></div>
    </el-col>
  </el-row>
            
            
            
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { getRegInfo, getDayRegInfo } from "@/api/api";

const regCount = ref(0);
const maleCount = ref(0);
const femaleCount = ref(0);

const loadRegInfo = () => {
    getRegInfo().then((res) => {
        if (res.data.code == 200) {
            regCount.value = res.data.data.regCount;
            maleCount.value = res.data.data.maleCount;
            femaleCount.value = res.data.data.femaleCount;
        }
    });
};

const drawRegBar = () => {
    getDayRegInfo().then((res) => {
        if (res.data.code == 200) {
            let xData = res.data.data.xData;
            let yData = res.data.data.yData;

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main1"));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: "最近一个月每天注册人数",
                },
                tooltip: {},
                xAxis: {
                    data: xData,
                },
                yAxis: {},
                series: [
                    {
                        name: "人数",
                        type: "bar",
                        data: yData,
                    },
                ],
            });
        }
    });
};

const drawRegLine = () => {
    getDayRegInfo().then((res) => {
        if (res.data.code == 200) {
            let xData = res.data.data.xData;
            let yData = res.data.data.yData;

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main2"));
            // 绘制图表
            myChart.setOption({
                title: {
                    text: "最近一个月每天注册人数",
                },
                tooltip: {},
                xAxis: {
                    data: xData,
                },
                yAxis: {},
                series: [
                    {
                        name: "人数",
                        type: "line",
                        data: yData,
                    },
                ],
            });
        }
    });
};

const drawDayRegPie = () => {
    getDayRegInfo().then((res) => {
        if (res.data.code == 200) {
            let pieData = res.data.data.pieData;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById("main3"));
            var option = {
                title: {
                    text: "最近一个月每天注册人数",
                    subtext: "",
                    left: "center",
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    left: "left",
                },
                series: [
                    {
                        name: "注册人数",
                        type: "pie",
                        radius: "50%",
                        data: pieData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "rgba(0, 0, 0, 0.5)",
                            },
                        },
                    },
                ],
            };
            myChart.setOption(option);
        }
    });
};

// 页面加载钩子函数
onMounted(() => {
    loadRegInfo();
    drawRegBar();
    drawRegLine();
    drawDayRegPie();
});
</script>

<style scoped></style>
